<template>
    <div>
      <el-input v-model="search" size="small" placeholder="通过序号搜索进度" class="custom-input" />
      <el-table v-if="search.trim() !== ''" :data="filteredTaskList" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180" />
        <el-table-column label="进度步骤" width="180">
          <template #default="{ row }">
            <el-select v-model="row.process" placeholder="请选择" @change="updateProcess(row)">
              <el-option v-for="option in processOptions" :key="option.value" :label="option.label" :value="option.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="完成比例" width="180">
          <template #default="{ row }">
            <el-select v-model="row.processRate" placeholder="请选择" @change="updateProcessRate(row)" :disabled="isDisabled(row)" @focus="handleDisabledClick">
              <el-option v-for="option in rateOptions" :key="option.value" :label="option.label" :value="option.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="进度" width="180">
          <template #default="{ row }">
            <el-progress type="circle" :percentage="parseFloat(row.processRate)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
        &nbsp;
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue';
  import axios from 'axios';
  
  interface Task {
    id: number;
    process: string;
    processRate: string;
  }
  
  const search = ref('');
  const taskList = ref<Task[]>([]);
  const processOptions = [
    { label: '未开始', value: '未开始' },
    { label: '进行中', value: '进行中' },
    { label: '已结束', value: '已结束' }
  ];
  const rateOptions = [
    { label: '0%', value: '0%' },
    { label: '10%', value: '10%' },
    { label: '20%', value: '20%' },
    { label: '30%', value: '30%' },
    { label: '40%', value: '40%' },
    { label: '50%', value: '50%' },
    { label: '60%', value: '60%' },
    { label: '70%', value: '70%' },
    { label: '80%', value: '80%' },
    { label: '90%', value: '90%' },
    { label: '100%', value: '100%' }
  ];
  
  const filteredTaskList = computed(() =>
    taskList.value.filter(task => task.id.toString().includes(search.value.trim()))
      .map(task => ({
        ...task,
        percentage: parseFloat(task.processRate) // 将完成比例字符串转换为浮点数
      }))
  );
  
  const getTaskList = async () => {
    try {
      const res = await axios.get('http://localhost:9500/api/taskArrange/getList');
      taskList.value = res.data.data;
    } catch (error) {
      console.error('获取任务列表失败:', error);
    }
  };
  
  const updateProcess = async (row: Task) => {
    try {
      await axios.put(`http://localhost:9500/api/taskArrange/update/${row.id}`, {
        process: row.process
      });
    } catch (error) {
      console.error('更新进度步骤失败:', error);
    }
  };
  
  const updateProcessRate = async (row: Task) => {
    if (isDisabled(row)) {
      console.error('不能修改完成比例，因为任务状态为 "未开始" 或 "已结束"');
      return;
    }
    try {
      await axios.put(`http://localhost:9500/api/taskArrange/update/${row.id}`, {
        processRate: row.processRate
      });
    } catch (error) {
      console.error('更新完成比例失败:', error);
    }
  };
  
  const isDisabled = (row: Task) => {
    return row.process === '未开始' || row.process === '已结束';
  };
  
  const handleDisabledClick = () => {
    console.error('不能修改完成比例，因为任务状态为 "未开始" 或 "已结束"');
  };
  
  getTaskList();
  </script>
  
  <style scoped>
  /* 自定义样式 */
  .custom-input {
    width: 200px; /* 设置宽度 */
    height: 40px; /* 设置高度 */
    line-height: 40px; /* 设置行高，使内容居中 */
  }
  </style>
  